<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生jQuery可调整图片大小排列方式特效</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
body{ background:#ccc;}
#lanrenzhijia{ width:1000px; height:auto; overflow:hidden; margin:200px auto;padding:10px 0 0 10px;}
#lanrenzhijia dl{ background:#3D3E3D;border-radius:5px; overflow:hidden; padding:10px;}
#lanrenzhijia dl a{ display:block; width:180px; height:30px; line-height:30px; background:#909290; text-decoration:none;border-radius:5px; overflow:hidden; margin:0px 10px; font-size:14px; color:#fff; text-align:center; float:left;}
#lanrenzhijia dl a:hover{ background:#D6525A; text-decoration:none; color:#fff;}
#lanrenzhijia dl a.on{ background:#B0000E; text-decoration:none; color:#fff;}
#lanrenzhijia ul{ margin:20px 0;background:#3D3E3D;border-radius:5px; padding:10px 0 0 10px; overflow:hidden;}
#lanrenzhijia ul li{ width:237px; height:235px; float:left; margin-bottom:10px; margin-right:10px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenzhijia">
	<dl><a href="javascript:;" class="small on">小图</a><a href="javascript:;" class="middle">中图</a><a href="javascript:;" class="big">大图</a></dl>
    <ul>
    	<li><img src="1.png" width="100%" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
        <li><img src="1.png" width="237" height="237" alt="懒人之家" /></li>
    </ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
	var lis = $('#lanrenzhijia ul li');
	var imgs = $('#lanrenzhijia ul li img');
	var smallSize = '237px'; //小图片大小
	var middleSize = '485px'; //中图片大小
	var bigSize = '980px'; //大图片大小
	
	//图片切换大小点击
	$('.small').click(function(){lanrenzhijia(smallSize)});
	$('.middle').click(function(){lanrenzhijia(middleSize)});
	$('.big').click(function(){lanrenzhijia(bigSize)});
	function lanrenzhijia(w){
		lis.each(function(){$(this).stop().animate({width:w,height:w});});
		imgs.each(function(){$(this).stop().animate({width:w,height:w});});
	}
});
</script>
<!-- 代码部分end -->
</body>
</html>